<template>
  <div class="box">
    <h1>组件间通信6: $attrs与$listeners</h1>
    <h2>需求: 自定义带Hover提示的按钮</h2>
    <HintButton class="a" style="color: red" title="添加用户" type="primary" icon="el-icon-plus" @click="add" @xxx="add"/>
    <HintButton title="修改用户" type="info" icon="el-icon-edit" round/>
    <HintButton title="删除用户" type="danger" icon="el-icon-delete" circle size="mini"/>

      <!-- 
        问题: el-button内部没有分发自定义dblclick事件, 在外部绑定的自定义dblclick是不可能响应的
        解决: 通过.native变为绑定原生的dblclick, 双击按钮会响应

       -->
     <HintButton title="双击添加用户" type="primary" icon="el-icon-plus" @dblclick.native="add2"/>

    <!-- <el-button type="primary" @dblclick="test">添加</el-button>
    <button @dblclick="test">添加22</button> -->
  </div>
</template>

<script type="text/ecmascript-6">
  import HintButton from './HintButton.vue'
  export default {
    name: 'AttrsListenersTest',
    components: {
      HintButton
    },
    methods: {
      add () {
        alert('添加用户')
      },

      add2 () {
        alert('双击添加用户')
      },

       test () {
        alert('------')
      }
    },
  }
</script>
